<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	{css href="__STATIC__/bootstrap-3.3.7/css/bootstrap.min.css" /}
	{js href="__JS__/echarts.min.js" /}
	{js href="__JS__/jquery-3.3.1.min.js"}
</head>

<body>

{include file="admin/header" /}
<table class="table table-bordered">
 	<tr>
 		<th>序号</th>
 		<th>学院</th>
 		<th>总人数</th>
 		<th>完成人数</th>
 		<th>完成比例</th>
 	</tr>
 	{volist name='info' id="vo"}
 	<tr>
		<td>{$i}</td>
		<td>{$vo.college}</td>
		<td>{$vo.allnum}</td>
		<td>{$vo.overnum}</td>
		<td>{$vo.pe}</td>
 	</tr>
 	{/volist}
</table>

    <center><div id="main" style="width: 1200px;height:400px;"></div></center>

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学生完成情况'
                },
                tooltip: {},
                legend: {
                    data:['学生总人数','完成人数']
                },
                xAxis: {
                    data: [{volist name='info' id='vo'}"{$vo.college}",{/volist}]
                },
                yAxis: {},
                series: [
                    {
                        name: '学生总人数',
                        type: 'bar',
                        barGap: 0,
                        data: [{volist name="info" id="vo"}{$vo.allnum},{/volist}]
                    },
                    {
                        name: '完成人数',
                        type: 'bar',
                        barGap: 0,
                        data: [{volist name="info" id="vo"}{$vo.overnum},{/volist}]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
</body>
</html>